<template>
  <div class="boxContent">
    <div class="appBox">
      <div class="searchList">
        <el-form :model="state.params"
                 ref="FormInstance "
                 class="boxFrom">
          <div class="searchBox">
            <template v-for="(item, index) in state.totalInputColumns"
                      :key="index">
              <el-form-item v-if="item.type == 'input'">
                <el-input v-model="state.params[item.key]"
                          :placeholder="item.label"></el-input>
              </el-form-item>
              <el-form-item v-if="item.type == 'select'">
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'type'">
                  <el-option label="聊天窗口预览"
                             :value="0" />
                  <el-option label="分享海报"
                             :value="1" />
                </el-select>
              </el-form-item>
            </template>
          </div>

          <el-form-item class="btns">
            <el-button v-preventReClick
                       type="primary"
                       @click="methods.handleAction('add')"
                       v-permission="1135">添加图片</el-button>
            <el-button v-preventReClick
                       type="primary"
                       plain
                       @click="methods.handleAction('query')">搜索</el-button>
            <el-button v-preventReClick
                       type=""
                       @click="methods.handleAction('reset')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tabaleBox">
        <el-table border
                  v-loading='state.loading'
                  :data="state.tableData"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }">

          <el-table-column prop="orderNum"
                           label="排序"
                           width="120"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="createdAt"
                           label="上传时间"
                           show-overflow-tooltip
                           align="center" />
          <el-table-column prop="name"
                           label="图片名称"
                           show-overflow-tooltip
                           align="center">
          </el-table-column>
          <el-table-column prop="createdName"
                           label="状态"
                           show-overflow-tooltip
                           align="center">
            <template #default="scope">
              <span :class="scope.row.useCount == 0 ?'success':'primary'">{{ scope.row.useCount == 0 ?'未使用':'已使用' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name"
                           label="分享类型"
                           show-overflow-tooltip
                           align="center">
            <template #default="scope">
              {{ scope.row.type == 0 ?'聊天窗口预览':'分享海报' }}
            </template>
          </el-table-column>
          <el-table-column prop=""
                           label="上传图片"
                           align="center">
            <template #default="scope">
              <el-image style="width: 90px; height: 30px"
                        :src="JSON.parse(scope.row.url)[0]?.url"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :preview-teleported="true"
                        :min-scale="0.2"
                        :preview-src-list="[JSON.parse(scope.row.url)[0]?.url]"
                        :initial-index="1"
                        fit="cover" />
            </template>
          </el-table-column>
          <el-table-column prop="createdName"
                           label="上传人"
                           show-overflow-tooltip
                           align="center" />

          <el-table-column prop="btns"
                           label="操作"
                           show-overflow-tooltip
                           align="center"
                           width="100"
                           fixed="right">
            <template #default="scope">
              <div class=" btnsDatil">
                <!-- <div @click="methods.handleAction('edit', scope.row)">编辑</div>
                <div @click="methods.handleAction('role', scope.row)">授权</div> -->
                <div @click="methods.handleAction('delete', scope.row)"
                     v-permission="1136">
                  删除
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div>

      <el-dialog v-model="state.dialogAdd"
                 center
                 v-if="state.dialogAdd"
                 title="添加分享图片"
                 :width="$px2rem('650px')">
        <div class=""
             style="padding: 30px;">
          <el-form :model="state.dialogParams"
                   label-width="90"
                   style="max-width: 600px">
            <el-form-item label="图片名称：">
              <el-input v-model="state.dialogParams.name" />
            </el-form-item>
            <el-form-item label="上传图片：">
              <el-image v-if="$route.query.status == 1"
                        :src="state.dialogParams?.permit[0]?.url"
                        :zoom-rate="1.2"
                        :preview-src-list="[state.dialogParams?.permit[0]?.url]"
                        :max-scale="7"
                        :min-scale="0.2"
                        :initial-index="1"
                        fit="cover">
              </el-image>
              <uploadImg :showNum="1"
                         v-else
                         :uploadImgList="state.dialogParams?.permit"
                         @changeUploadImgList="methods.UploadPermit" />
            </el-form-item>
            <el-form-item label="排序：">
              <el-input v-model="state.dialogParams.orderNum" />
            </el-form-item>
            <el-form-item label="类型：">
              <el-select v-model="state.dialogParams.type">
                <el-option label="聊天窗口预览"
                           value="0" />
                <el-option label="分享海报"
                           value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="模板位置：">
              选择图片二维码模板位置
            </el-form-item>

            <el-form-item label="">

              <div :class="['imgForBox flex_c',{'activeImg':0 == state.active}]"
                   @click="methods.btnImg(i,0)">
                <img src="../../../assets/login/b2.png"
                     style="width: 90px;height: 160px;"
                     alt="">
              </div>
              <div :class="['imgForBox flex_c',{'activeImg':1 == state.active}]"
                   @click="methods.btnImg(i,1)">
                <img src="../../../assets/login/b1.png"
                     style="width: 90px;height: 160px;"
                     alt="">
              </div>
              <div :class="['imgForBox flex_c',{'activeImg':2 == state.active}]"
                   @click="methods.btnImg(i,2)">
                <img src="../../../assets/login/b3.png"
                     style="width: 90px;height: 160px;"
                     alt="">
              </div>
            </el-form-item>
            <el-form-item label="字体颜色："
                          v-if="state.dialogParams.type == '1'">
              <div class="flex">
                <div>
                  <el-color-picker v-model="state.dialogParams.color" />
                </div>
                <div class="ml10 fb f16"
                     :style="{'color':state.dialogParams.color}">
                  文字颜色示例
                </div>
              </div>

            </el-form-item>

          </el-form>
        </div>
        <div class="tar mb10  mr20">
          <el-button v-preventReClick
                     @click="state.dialogAdd = false">取消</el-button>
          <el-button v-preventReClick
                     @click="methods.imgAdd"
                     type="primary">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  reactive,
  toRefs,
  defineComponent,
  getCurrentInstance,
} from "vue";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {
    loading: false,
    dialogAdd: false,
    totalSize: 0,
    tableData: [],
    params: {
      pageNum: 1,
      pageSize: 10,
      name: "",
      cid: '',
      type: '',
      status: '',
    },
    dialogParams: {
      name: '',
      permit: null,
      orderNum: '0',
      type: '0',
      createdName: '',
      color: '#000000',
    },
    totalInputColumns: [
      { key: "type", label: "分享海报配置", type: "select" }
    ],
    active: 0,
  };
};
const state = reactive(initState());
onMounted(() => {
  methods.getDataList();
});
const methods = {
  imgAdd () {
    console.log(state.dialogParams.permit);
    if (state.dialogParams.permit == null || state.dialogParams.name == '') {
      ElMessage({
        message: '请填写图片名称上传图片',
        type: 'error'
      })
      return
    }
    if (state.dialogParams.type == 1 && state.dialogParams.color == null) {
      ElMessage({
        message: '请选择字体颜色',
        type: 'error'
      })
      return
    }
    app.$post('/sysPicture/add', {
      name: state.dialogParams.name,
      orderNum: state.dialogParams.orderNum,
      type: state.dialogParams.type,
      qrCode: state.active + 1,
      url: JSON.stringify(state.dialogParams.permit),
      color: state.dialogParams.color
    }).then(res => {
      if (res.code == 200) {
        ElMessage({
          message: '新增成功',
          type: 'success'
        })
        state.dialogParams.name = ''
        state.dialogParams.orderNum = 0
        state.dialogParams.type = '0'
        state.dialogParams.permit = null
        state.dialogAdd = false
        methods.getDataList()
      }
    })
  },
  btnImg (i, k) {
    state.active = k
  },
  // 上传图片
  UploadPermit (data) {
    console.log(data);
    state.dialogParams.permit = data;
    console.log(state.dialogParams.permit);
  },

  handleAction (type, data) {
    switch (type) {

      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        state.params = initState().params;
        break;
      case "add": // 编辑
        state.dialogAdd = true
        break;
      case "edit": // 编辑
        router.push("/roleAdd?id=" + data.id);
        break;
      case "state": // 状态开关
        methods.getDataList();
        break;
      case "delete": // 删除
        ElMessageBox.confirm("请确认是否删除该分享图片?", "删除图片", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            app.$http.get("/sysPicture/deleteById?id=" + data.id).then((res) => {
              methods.getDataList();
              ElMessage({
                type: "success",
                message: "已删除",
              });
            });
          })
          .catch(() => {
            methods.getDataList();
            ElMessage({
              type: "info",
              message: "已取消",
            });
          });

        break;
    }
  },
  getDataList () {
    state.loading = true
    app.$http
      .post("/sysPicture/pageList", state.params)
      .then((res) => {
        state.tableData = res.data.list;
        state.totalSize = res.data.total;
        state.loading = false
      }).catch(() => {
        state.loading = false
      })
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.activeImg {
  border: 2px solid #409eff !important;
}
.imgForBox {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-right: 20px;
}
.appBox {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100% - 20px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .btnsDatil {
    color: #0079fe;
    cursor: pointer;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }

  .imgs {
    flex-wrap: wrap;
    .forbox {
      height: 150px;
      margin: 10px 0 0 10px;
    }
    .imgBox {
      height: 100%;
      width: auto;
    }
    .videoBox {
      width: auto;
      height: 100%;
    }
  }
}
</style>
